<template>
  <y9Card :showHeader="false">
    <div class="toolbar">
      <div class="toolbar-left">
        <el-button :size="fontSizeObj.buttonSize"
                   :style="{ fontSize: fontSizeObj.baseFontSize }" class="global-btn-second" :disabled="multipleSelection && multipleSelection.length === 0"
            @click="cancelShare"><i class="ri-indeterminate-circle-line"></i> {{ $t('取消共享') }}</el-button>
        <el-button :size="fontSizeObj.buttonSize"
                   :style="{ fontSize: fontSizeObj.baseFontSize }" class="global-btn-main" type="primary" @click="loadList"><i class="ri-refresh-line"></i>{{ $t('刷新') }}</el-button>
      </div>
      <div class="toolbar-right">
      </div>
    </div>
    <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="rows"
        tooltip-effect="dark"
        style="width: 100%"
        :height="tableHeight"
        :empty-text="$t('暂无文件')"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45"> </el-table-column>
      <!-- <el-table-column type="index" label="序号" width="60"> </el-table-column> -->
      <el-table-column :label="$t('文件名')">
        <template #default="name">
          <FileNameWithIcon :file-node="name.row.fileNode" />
        </template>
      </el-table-column>
      <el-table-column prop="toOrgUnitNames" :label="$t('接收人')" width="220"> </el-table-column>
      <el-table-column prop="fileNode.fileSize" :label="$t('大小')" width="120">
        <template #default="size">
          {{ size.row.fileNode.fileSize ? size.row.fileNode.fileSize : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="fileNode.updateTime" :label="$t('共享日期')"  width="170"> </el-table-column>
    </el-table>
  </y9Card>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, watch,computed,reactive, toRefs} from 'vue';
import type{ ElMessage, ElMessageBox } from 'element-plus';
import FileNodeShareApi from '@/api/storage/fileNodeShare';
import FileNameWithIcon from '@/components/storage/FileNameWithIcon/index.vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 注入 字体对象
const fontSizeObj: any = inject('sizeObjInfo')||{};
const data = reactive({
      multipleTable:'',
      rows: [],
      multipleSelection: [],
      loading: false,
      tableHeight: window.innerHeight - 260,
      tableScreenHeight: window.innerHeight,
})

let {
      multipleTable,
      rows,
      multipleSelection,
      loading,
      tableHeight,
      tableScreenHeight,
    } = toRefs(data);

onMounted(() => {
    loadList();
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight;
        tableScreenHeight.value = window.screenHeight;
      })();
    };
  })

 function toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          multipleTable.value.toggleRowSelection(row);
        });
      } else {
        multipleTable.value.clearSelection();
      }
  }

  function handleSelectionChange(val) {
      multipleSelection.value = val;
  }

  function cancelShare() {
    ElMessageBox.confirm(t("您确定要对所选文件取消共享吗？取消共享的文件会移动至'全部文件'中"), t('提示'), {
        confirmButtonText: t('确定'),
        cancelButtonText: t('取消'),
        type: 'info'
      }).then(() => {
        var IdArr = multipleSelection.value.map(item => item.fileNode.id);
        FileNodeShareApi.cancelShare(IdArr).then(() => {
          loadList();
        });
      }).catch(() => {
        ElMessage({ type: "info", message: t("已取消操作"),offset:65});
      });
  }

  function loadList() {
    loading.value = true;
    FileNodeShareApi.list().then(res => {
      loading.value = false;
      rows.value = res.data;
    });
  }
</script>

<style lang="scss" scoped>
@import "@/theme/global.scss";

:deep(.el-table__cell .cell){
  padding-left: 0px;
  font-size: v-bind('fontSizeObj.baseFontSize');
}

:deep(.el-table-column--selection .cell){
  padding-left: 12px;
  padding-right: 12px;
}

:deep(.el-table__inner-wrapper::before) {
    height: 0px;
}

.toolbar:after {
  clear: both;
  content: '';
  display: block;
}

.toolbar-left {
  float: left;
}

.toolbar-right {
  float: right;
}

:deep(.el-table__empty-text) {
  font-size: v-bind('fontSizeObj.baseFontSize');
}

</style>
